<template>
    <div id="LiveWeeklymenu">
        <h2 class="w_h2">每周推荐</h2>
        <div class="w_div1">
            <el-table :data="glptableData" border style="width:1000px">
                <el-table-column prop="date" label="分类" align="center">
                </el-table-column>
                <el-table-column prop="morn" label="早餐" align="center">
                    <template slot-scope="scope">
                        <div class="tableimg">
                            <img :src="scope.row.mornImgSrc" width="50" height="50">
                            <span>{{ scope.row.morn }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="noon" label="午餐" align="center">
                    <template slot-scope="scope">
                        <div class="tableimg">
                            <img :src="scope.row.noonImgSrc" width="50" height="50">
                            <span>{{ scope.row.noon }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="Tues" label="下午茶" align="center">
                    <template slot-scope="scope">
                        <div class="tableimg">
                            <img :src="scope.row.TuesImgSrc" width="50" height="50">
                            <span>{{ scope.row.Tues }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="Turs" label="晚餐" align="center">
                    <template slot-scope="scope">
                        <div class="tableimg">
                            <img :src="scope.row.TursImgSrc" width="50" height="50">
                            <span>{{ scope.row.Turs }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                    <template slot-scope="scope">
                        <button class="edit" @click="editBtn(scope.row)">修改</button>
                        <button class="check" @click="checkBtn(scope.row)">查看</button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
            :page-sizes="[5, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="pageArr.length"
            class="clearfix">
        </el-pagination>
        <div class="w_div2">
            <el-dialog title="修改食谱" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="早餐" :label-width="formLabelWidth">
                        <el-input v-model="editArr.morn" autocomplete="off"></el-input>
                        <el-input v-model="editArr.mornImgSrc" autocomplete="off" placeholder="请输入路径地址"></el-input>
                    </el-form-item>
                    <el-form-item label="午餐" :label-width="formLabelWidth">
                        <el-input v-model="editArr.noon" autocomplete="off"></el-input>
                        <el-input v-model="editArr.noonImgSrc" autocomplete="off" placeholder="请输入路径地址"></el-input>

                    </el-form-item>
                    <el-form-item label="下午茶" :label-width="formLabelWidth">
                        <el-input v-model="editArr.Tues" autocomplete="off"></el-input>
                        <el-input v-model="editArr.TuesImgSrc" autocomplete="off" placeholder="请输入路径地址"></el-input>

                    </el-form-item>
                    <el-form-item label="晚餐" :label-width="formLabelWidth">
                        <el-input v-model="editArr.Turs" autocomplete="off"></el-input>
                        <el-input v-model="editArr.TursImgSrc" autocomplete="off" placeholder="请输入路径地址"></el-input>

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editSure()">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <p>{{ this.content }}</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<style lang="less" >
#LiveWeeklymenu {
    .w_h2 {
        font-weight: 600;
        font-family: "楷体";
        font-size: 30px;
        color: rgb(165, 2, 2);
    }

    .w_div1 {
        // width: 1000px;
        margin: auto;
        width: 1000px;

        .el-table {

            margin: 0 auto;
            margin-left: 20px;

            .del {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
            }

            .edit {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
                margin-left: 25px;
            }

            .check {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
            }

            .w_img1 {
                width: 50px;
                height: 50px;
            }
        }
    }

    .w_div2 {
        .el-dialog {
            width: 500px;
            height: 590px;
        }

    }

    .el-pagination {
        float: right;
        margin-top: 30px;
    }

    .clearfix:after {
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;

    }
}

.tableimg {
    text-align: left;
}
</style>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            glptableData: [],
            pageArr: [],
            editArr: {
                id: '',
                morn: '',
                noon: '',
                Tues: '',
                Turs: '',
                content: '',
                mornImgSrc: '',
                noonImgSrc: '',
                TuesImgSrc: '',
                TursImgSrc: '',
                chakanid: 0
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogVisible: false,
            count: 5,
            page: 1,
            currentPage4: 1,
            editid: 0,
            content: "",
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '60px'
        }


    },
    methods: {
        //分页
        handleSizeChange(val) {
            this.count = val;
            this.glptableData = this.pageArr.slice(0, this.count)
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage4 = val;
            this.glptableData = this.pageArr.slice((val - 1) * this.count, val * this.count);
            console.log(`当前页: ${val}`);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        rander() {
            axios({
                url: '/dbdata/glptableData',
                // method:'post',
                // data:this.photArr
            }).then(({ data }) => {
                this.pageArr = data;
                this.glptableData = this.pageArr.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);
            })
        },
        editBtn(row) {
            this.dialogFormVisible = true;
            this.editid = row.id,
                this.editArr = {
                    id: row.id,
                    morn: row.morn,
                    noon: row.noon,
                    Tues: row.Tues,
                    Turs: row.Turs,
                    mornImgSrc:row.mornImgSrc,
                    noonImgSrc: row.noonImgSrc,
                    TuesImgSrc: row.TuesImgSrc,
                    TursImgSrc: row.TursImgSrc,
                }
        },
        editSure() {
            let str = '/dbdata/glptableData/' + this.editid
            axios({
                url: str,
                method: "patch",
                data: this.editArr
            }).then(() => {
                // console.log(res);
                this.dialogFormVisible = false;
                this.$message.success('修改成功');
                this.rander();
            })
        },
        checkBtn(row) {
            this.editid = row.id;
            console.log(row.id);
            let str = '/dbdata/glptableData/' + this.editid;
            axios({
                url: str,
                method: 'get',
            }).then((res) => {
                this.dialogVisible = true
                this.chakanid = res.data.id
                console.log(this.chakanid);
                this.content = res.data.content

            })
        },
        // formatAvatar(row) {
        //     return `<img src="${glptableData.img}" style="width: 50px; height: 50px;">`;
        // }

    },
    mounted() {
        this.rander();
    }

}

</script>